<template>
    <transition name="right_slide">
        <div class="quick-tour" v-show="$parent.showPage">
            <div>
                <div v-for="(item,index) in list" :key="index" @click="choseItem(item.text)">
                    <img :src="item.img" alt="">
                    <p>{{ item.text }}</p>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    data(){
        return{
            list: [
                { img: require("../../static/img/1.png"), text: "漫游路径1" }, 
                { img: require("../../static/img/2.png"), text: "漫游路径2" }, 
                // { img: require("../../static/img/3.png"), text: "作业C区" }, 
                // { img: require("../../static/img/4.png"), text: "作业D区" }, 
                // { img: require("../../static/img/5.png"), text: "作业E区" }, 
                // { img: require("../../static/img/6.png"), text: "俯瞰视角" }, 
                // { img: require("../../static/img/7.png"), text: "盘旋视角" }, 
                // { img: require("../../static/img/8.png"), text: "内部视角" }, 
                // { img: require("../../static/img/9.png"), text: "航道视角" }, 
            ],
        }
    },
    methods: {
        choseItem(text){
            console.log(text);
            this.$bus.$emit("send-Message", text);
        }
    }
}
</script>

<style lang="scss" scoped>
.quick-tour {
    position: relative;
    >div{
        z-index: 10;
        height: calc(100% - 1.6vh);
        width: 8.34vw;
        padding: 1.6vh 0.8vw;
        box-sizing: border-box;
        position: absolute;
        right: 2.4vw;
        background: url("~@static/img/Frame427319176.png") no-repeat 0 0/100% 100%;
        // display: flex;
        // flex-direction: column;
        // justify-content: space-between;
        >div{
            width: 100%;
            height: calc((100% / 9) - 1.5vh);
            position: relative;
            cursor: pointer;
            margin-bottom: 1vh;
            img{
                width: 100%;
                height: 100%;
            }
            p{
                color: #fff;
                font-size: 0.8vw;
                position: absolute;
                text-align: center;
                bottom: 0.3vh;
                width: 100%;
            }
        }
    }
}

/* 右侧内容从右到左动画 */
.right_slide-enter-active,
.right_slide-leave-active {
  transition: all 0.5s linear;
  transform: translateX(0);
}
.right_slide-enter,
.right_slide-leave {
  transform: translateX(10%);
}
.right_slide-leave-to {
  transform: translateX(10%);
}
</style>